<template>
    
    <tree-grid 
        :items="menuList"
        :columns="columns"
        @on-row-click="rowClick"
        @on-selection-change="selectionClick"
        @on-sort-change="sortClick"
      ></tree-grid>
    
</template>
<script>
    import TreeGrid from './tree-grid.vue'
    import menus from './data.js'
    export default {
        components: {
            TreeGrid
        },
        data() {
            return {
                columns: [
                    // {
                    //     type: 'selection',
                    //     width: '50',
                    // }, 
                    {
                        title: '菜单名称',
                        key: 'name',
                        width: '150',
                    }, 
                    {
                        title: '菜单图标',
                        key: 'icon',
                        width: '150',
                    },
                    {
                        title: '上级菜单',
                        key: 'pname',
                        width: '150',
                    }, 
                    {
                        title: '操作',
                        type: 'action',
                        actions: [
                            {
                                type: 'primary',
                                text: '编辑'
                            }, 
                            {
                                type: 'error',
                                text: '删除'
                            }
                        ],
                        width: '150',
                    }
                ],
                menuList: menus.menusList
            }
        },
        methods: {
            rowClick(data, index, event) {
                console.log('当前行数据:' + data)
                console.log('点击行号:' + index)
                console.log('点击事件:' + event)
            },
            selectionClick(arr) {
                console.log('选中数据id数组:' + arr)
            },
            sortClick(key, type) {
                console.log('排序字段:' + key)
                console.log('排序规则:' + type)
            }
        }
    }
</script>